<!-- 盲盒-中奖记录 -->
<script setup>
import { reactive } from 'vue'
const data = reactive({
  list: []
})
</script>

<template>
  <view class="blindBox-record-page">
    <!-- 空状态 -->
    <view v-if="data.list.length <= 0" style="padding-top: 200rpx;">
      <up-empty mode="coupon" text="暂无中奖记录"></up-empty>
    </view>
    <view v-else class="list">
      <view class="item" v-for=" item in data.list" :key="item">
        <view class="card">
          <view class="left">
            <view class="name">
              <text>优惠券名称</text>
            </view>
            <view class="detail">
              <text>满200减10</text>
            </view>
          </view>
          <view class="right">
            <up-icon name="close" color="#000000" size="12"></up-icon>
            <text class="num">2</text>
          </view>
        </view>
        <view class="time">
          <text>2024-07-28 09:30</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.blindBox-record-page {
  padding-bottom: 60rpx;
  min-height: 100vh;
  background-color: #F9F9F9;
  padding-bottom: 60rpx;

  & .list {
    padding: 0 30rpx;

    & .item {
      padding-top: 40rpx;

      & .card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 30rpx;
        background: #FFFFFF;
        border-radius: 10rpx;

        & .left {
          & .name {
            font-weight: 500;
            font-size: 30rpx;
            color: #333333;
          }

          & .detail {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
          }
        }

        & .right {
          display: flex;
          align-items: center;

          &::v-deep .u-icon text {
            font-weight: 700 !important;
          }

          & text {
            margin-left: 6rpx;
            font-weight: 500;
            font-size: 36rpx;
            color: #333333;
          }
        }
      }

      & .time {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        text-align: right;
      }
    }
  }
}
</style>